<template>
<div class="con">

  <div class="goodlists-container">
    <div class="container" v-for="(item, index) in goodlist" :key="index">
      <div class="header">
        <span class="title">{{ item.title }}</span>
        <span class="huodong">{{ item.huodong }}</span>
      </div>
      <div class="content">
          
        <div>
            <p>$1000</p>
            <p>{{ item.content }}</p>
            </div>
        <div>
          <img src="#" alt="加载失败" />
        </div>
      </div>
    </div>
  </div>
</div>

</template>

<script>
export default {
  data() {
    return {
      goodlist: [
        { title: "品牌", huodong: "活动", content: "内容" },
        { title: "品牌", huodong: "活动", content: "内容" },
        { title: "品牌", huodong: "活动", content: "内容" },
        { title: "品牌", huodong: "活动", content: "内容" },
        { title: "品牌", huodong: "活动", content: "内容" },
        { title: "品牌", huodong: "活动", content: "内容" },
        { title: "品牌", huodong: "活动", content: "内容" },
        { title: "品牌", huodong: "活动", content: "内容" },
        { title: "品牌", huodong: "活动", content: "内容" },
        { title: "品牌", huodong: "活动", content: "内容" },
        { title: "品牌", huodong: "活动", content: "内容" },
        { title: "品牌", huodong: "活动", content: "内容" },
        { title: "品牌", huodong: "活动", content: "内容" },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.con{
 overflow-x: scroll;
.goodlists-container {
    width: 870px;
    display: flex;
    flex-wrap: wrap;
  .container {
    background: #fff;
    width: 120px;
    margin-right: 3px;
    .header {
      width: 100%;
      .title {
          background: red;
          color: white;
      }
      .huodong{ 
          font-size: 7px;
          color: red;
      }
    }
    .content {
        padding: 5px;
        display: flex;
    }
  }
}
}

</style>
